<template>
  <div class="userInfo">
    <!-- 展示 -->
    <a-card class="card-show" title="个人信息" hoverable>
      <pan-thumb width="100px" height="100px">
        <h3>hello</h3>
        <h3>admin</h3>
      </pan-thumb>
      <p class="role">admin</p>
      <a-divider />
      <p>介绍</p>
    </a-card>
    <!-- 编辑 -->
    <a-card class="card-update" title="基本资料" hoverable>
      <a-form class="form" :model="form" auto-label-width @submit="handleSubmit">
        <a-form-item field="userName" label="用户名">
          <a-input v-model="form.userName" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item field="mobile" label="手机号">
          <a-input v-model="form.mobile" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item field="email" label="电子邮箱">
          <a-input v-model="form.userEmail" placeholder="请输入电子邮箱">记住密码</a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left:20px;" @click="handleCancle">取消</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import PanThumb from "@/components/PanThumb/index.vue";
import Cookies from "js-cookie";
import { ref, reactive, onMounted } from "vue";
import { userUpdate } from "@/api/user/index.js";
import { useRouter } from "vue-router";
export default {
  components: { PanThumb },
  setup() {
    // 获取用户信息
    const user = Cookies.get("gn-userInfo")
      ? JSON.parse(Cookies.get("gn-userInfo"))
      : "";
    let form = ref(user);

    // 保存
    const handleSubmit = async (values, errors) => {
      const { data } = await userUpdate(form.value);
      console.log("data", data);
      Cookies.set("gn-userInfo", JSON.stringify(form.value));
      window.location.reload();
    };

    // 取消
    const router = useRouter();
    const handleCancle = () => {
      router.back();
    };
    return {
      form,
      handleSubmit,
      router,
      handleCancle
    };
  }
};
</script>
<style lang="scss" scoped>
.userInfo {
  height: 600px;
  display: flex;
  justify-content: space-between;

  .card-show {
    width: 20%;

    :deep(.arco-card-body) {
      display: flex;
      align-items: center;
      flex-direction: column;
      .role {
        margin-top: 20px;
      }
    }
  }
  .card-update {
    width: 80%;
    margin-left: 20px;
  }
}
</style>